<template>
    <div>
        <div class="container">
            <mt-header title="游记">
                <router-link to="/" slot="left">
                    <mt-button icon="back"></mt-button>
                </router-link>
            </mt-header>
            <mt-navbar v-model="selected">
                <mt-tab-item id="1">游记</mt-tab-item>
                <mt-tab-item id="2">笔记</mt-tab-item>
            </mt-navbar>
            <mt-tab-container v-model="selected">
                <mt-tab-container-item id="1">
                    <div class="youji" v-for="(item, index) in data" :key="index" @click="goD(item.id)">
                        <div>
                            <span>
                                {{ item.title }}
                            </span>
                        </div>
                        <div class="touxaing">
                            <img class="t2" :src='item.author.avatar'> <span>{{ item.author.phonenumber }}</span>
                        </div>
                        <div class="img">
                            <img class="t3" :src="baseUrl + item.cover">
                        </div>
                        <hr>
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="2">
                    <mt-cell v-for="n in 4" :title="'测试 ' + n" />
                </mt-tab-container-item>
            </mt-tab-container>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            id: '',
            selected: '',
            data: [],
            baseUrl: 'http://172.31.1.104:9090'
        }
    },
    methods: {
        getId() {
            this.id = this.$route.query.id
            // this.getArticelDetail(this.id)
            this.getArticleList()
        },
        getArticleList() {
            this.$axios({
                url: this.$api.getArticleList,
                method: 'get',
                params: {
                    pageNum: 1,
                    pageSize: 10,
                    category: '2'
                }
            }).then(res => {
                this.data = res.rows
                // console.log(res);
            })
        },
        goD(id){
            // console.log(id);
            this.$router.push({path: '/artDetail',query:{id:id}})
        }
        // getArticelDetail(id) {
        //     this.$axios({
        //         url: this.$api.getArticelDetail + id,
        //         method: 'get'
        //     }).then(res => {
        //         this.data = res.data
        //         console.log(this.data);
        //     })
        // }

    },
    mounted() {
        this.getId()
    }
}
</script>
<style lang="scss" scoped>
.container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.youji {
    margin: 0 auto;
    text-align: start;
    width: 90%;
    margin-top: 5px;

    .t2 {
        width: 18px;
        height: 18px;
        border-radius: 10px;
    }

    .img {
        margin-bottom: 20px;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        .t3 {
            width: 30%;
            height: 20%;
            border-radius: 10px;
        }
    }

}
</style>